<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
		<meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
		<title>title</title>
		<link rel="stylesheet" type="text/css" href="../css/aui.css"/>
		<style>
			/*html,body{
			 height: 100%;
			 }*/
			.Wrap {
				width: 100%;
				min-height: 100%;
				text-align: center;
				opacity: 0.9;
				position: absolute;
				top: 0;
				left: 0;
			}
			.back img {
				width: 0.8em;
				height: 1em;
			}
			.register_bg {
				width: 100%;
				height: 100%;
				background: url("../image/images/bg.png") no-repeat;
				background-size: 100%;
				-webkit-background-size: 100%;
				position: fixed;
				top: 0;
				left: 0;
			}
			.register_content {
				width: 100%;
				min-height: 100%;
				text-align: center;
			}
			#logo {
				margin: 9% 35%;
			}
			#telephone {
				width: 100%;
				background: #fff;
				padding: 3% 13%;
				border-radius: 10px;
				-webkit-box-sizing: border-box;
				-moz-box-sizing: border-box;
				box-sizing: border-box;
				margin-bottom: 1em;
			}
			#check {
				background: #fff;
				padding: 3% 13%;
				border-radius: 10px;
				width: 70%;
			}
			#check {
				background: #fff;
			}
			form div .check2 {
				background: #FB6D61;
				border-radius: 10px;
				color: #fff;
				font-size: 0.875em;
				text-align: center;
				padding: 0 3%;
			}
			.next {
				padding: 4% 32%;
				background: #089AEB;
				margin-top: 20%;
				color: #fff;
				border-radius: 10px;
				border: 1px solid #089AEB;
			}
			#sendVerify:hover {
				background-color: #D4D4D4;
			}
			.yzm {
				margin: 0;
			}
		</style>
	</head>
	<body>
		<div class="register_bg"></div>
		<div class="Wrap">
			<form action="" style="padding: 12% 10%;">
				<input id="telephone" type="tel" placeholder="请输入手机号" pattern="[0-9]{11}" required/>
				<div style="display: flex; justify-content: space-between;">
					<input id="check" type="text" placeholder="请输入验证码" pattern="[0-9]{6}" required style="flex: 1; margin-right: .875rem;height:2.1rem;"/>
					<!--<input class="check2" type="button" value="发送验证码" onclick="ssettime(this);" required/>-->
					<div class="aui-content aui-content-padded yzm" style="border-radius: 0.5rem">
						<div class="aui-btn aui-btn-danger"  id="sendVerify" status="1" style="width: 7em;height: 2.1rem;line-height:2.1rem;" onclick="getVerify();">
							发送验证码
						</div>
					</div>
				</div>
			</form>
			<div class="aui-content aui-content-padded">
				<p>
					<div id="mobile" class="aui-btn aui-btn-info aui-btn-block" tapmode onclick="nextToRegister()">
						下一步
					</div>
				</p>
			</div>
		</div>
	</body>
	<script type="text/javascript" src="../script/api.js"></script>
	<script type="text/javascript" src="../script/ajax/common.js"></script>
	<script type="text/javascript">
		var desMsg;
		apiready = function() {
		};
		function getVerify() {
			console.log("发送");
			var telephone = document.getElementById("telephone").value;
			if (telephone === null || telephone == "") {
				alert("手机号码不能为空！");
				return;
			}
			if (telephone.length != 11) {
				alert("手机号码格式不对！");
				return;
			}
			api.ajax({
				url : base_url + 'open/sendSmsF?phoneNo=' + telephone,
				method : 'get'
			}, function(ret, err) {
				if (ret.code === 0) {
					api.toast({
						msg : ret.msg
					});
					desMsg = ret.desMsg;
				} else {
					api.toast({
						msg : ret.msg
					});
				}
			});
			var sendVerify = $api.byId('sendVerify');
			var status = $api.attr(sendVerify, 'status');
			if (status != 1) {
				return;
			}
			$api.removeAttr(sendVerify, 'onclick');
			api.parseTapmode();
			$api.html(sendVerify, '<span id="GetVerify">120</span>S');
			times = 119;
			isinerval = setInterval("CountDown()", 1000);
			setTimeout(function() {
				$api.val($api.byId("code"), '888888');
			}, 500)
		}

		function nextToRegister() {
			var telephone = document.getElementById("telephone");
			var telephoneValue = telephone.value;
			if (telephoneValue === null || telephoneValue == "") {
				alert("手机号码不能为空！");
				return;
			}
			if (telephoneValue.length != 11) {
				alert("手机号码格式不对！");
				return;
			}
			var check = document.getElementById("check").value;
			if (check === null || check == "") {
				alert("请输入验证码");
			}
			console.log("telephoneValue", telephoneValue);
			console.log("code", check);
			console.log("desMsg", desMsg);
			api.ajax({
				url : base_url + 'open/validateCode',
				method : 'get',
				data : {
					values : {
						phoneNo : telephoneValue,
						code : check,
						desMsg : desMsg
					}
				}
			}, function(ret, err) {
				console.log(JSON.code)
				if (ret.code === 0) {
					api.openWin({
						name : 'password_winF',
						url : 'password_winF.html?ver=' + Math.random(),
						slidBackEnabled : false,
						pageParam : {
							phoneNo : telephoneValue
						}
					});
				} else {
					api.toast({
						msg : ret.msg
					});
				}
			});
		}

		function CountDown() {
			if (times < 1) {
				var sendVerify = $api.byId('sendVerify');
				$api.attr(sendVerify, 'onclick', 'get_verify()');
				$api.attr(sendVerify, 'status', '1');
				api.parseTapmode();
				$api.html(sendVerify, '重新获取');
				clearInterval(isinerval);
				return;
			}
			var getVerify = $api.byId('GetVerify');
			$api.html(getVerify, '' + times + '');
			times--;
		}
	</script>
</html>